<template>
    <div id="show-notes">
        <header class="mui-bar mui-bar-nav">
            <span class=" mui-icon mui-icon-search"></span>
            <input type="text" v-model="search" placeholder="搜索" style="position: absolute; margin-left: 10px;margin-top: 2px;width: 86%;color: black;">
            <!-- <span class="mui-icon mui-icon-more" style="float: right;"></span> -->
        </header>
        <div class="mui-content">
                <div class="mui-card-header mui-card-media" v-for="note in newNotes">

                        <img v-if="note.imgs" :src="note.imgs[0]" style="max-width: 200px;max-height: 343px;border:2px solid #fff;">
                        <router-link :to="{ name:'noteDetail' ,query:{note:note}}"  tag="div" class="mui-media-body">
                            <span>{{note.title }}</span>
                            <div class="note-con">{{note.content | snappedBody}}</div>
                            <p class="note-time">发表于 {{note.date}}</p>
                        </router-link>
        
                    </div>
        

        </div>
        <nav class="mui-bar mui-bar-tab">
            <router-link tag="a" to="/home"  class="mui-tab-item " id="defaultTab">
                <span class="mui-icon mui-icon-list"></span>
                <span class="mui-tab-label">日记</span>
            </router-link>
            <router-link tag="a" to="/addNote" class="mui-tab-item">
                <span class="mui-icon mui-icon-compose"></span>
                <span class="mui-tab-label">写日记</span>
            </router-link>

            <router-link tag="a" to="/search" class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label">搜索</span>
            </router-link>
        </nav>


    </div>

</template>

<script>
    export default {
        name: 'show-notes',
        data() {
            return {
                notes: [],
                search: '搜索',
                newNotes:[]
            }
        },
        methods: {
            goEdit: function () {
                this.$router.push('/addNote');
            },
           
        },
        created: function () {
            this.mui('body').on('tap', 'a', function () { document.location.href = this.href; });
            this.mui('body').on('click', 'a', function () { document.location.href = this.href; });
            var userId = this.common.getCookie('userName');
            var data = localStorage.getItem('note');
            var noteData =  JSON.parse(data);
            if (noteData) {
                for (let i = 0; i < noteData.length; i++) {
                    const data = noteData[i];
                    if (data && data.userId === userId) {
                        this.notes.push(data);
                    }
                }
            }
        },
        filters: {
            snappedBody: function (value) {
                return value.slice(0, 100) + '...';
            }
        },    
        watch: {
          'search': function(newVal){
              //匹配符合搜索条件的文章
              var s = this.search;
              var _newNotes = [];
              for (let i = 0; i < this.notes.length; i++) {
                    const data = this.notes[i];
                    if (s && data.title.indexOf(s)!=-1) {
                        _newNotes.push(data);
                    }
                }
                this.newNotes = _newNotes;                
            }
          },
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    html {
        touch-action: none;
    }

    header {
        background-color: #51a2e2;
        color: #fff;
    }

    .content {
        background: #fff;
    }

    h1 {
        color: #fff;
    }

    .mui-icon-more {
        float: right;
    }

    #cur-time {
        border: none;
        width: 60px;
        height: 30px;
    }

    .mui-card-header h2 {
        font-size: 10px;
    }

    .note-con {
        font-size: 10px;
        color: #8f8f94;
    }

    .note-time {
        color: #51a2e2;
    }

    .my-notice {
        margin: 5px;
        width: 97.5%;
        height: 35px;
        line-height: 35px;
        border: none;
        font-size: 12px;
        background-color: #fff;
        border-radius: 4px;
    }

    .notice-title {
        margin-left: 10px;
    }

    .notice-count {
        margin-left: 2px;
        color: #51a2e2;
    }

    .icon-icon-test {
        float: right;
        margin-right: 10px;
    }
</style>